<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>我的帖子1</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../plugins/mui/mui.min.css">
		<script src="../../js/statistics.js"></script>
		<style type="text/css">
			 *{
            box-sizing: border-box;
            font-family: 'Microsoft YaHei';

	        }
	        body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form,  input, p, table, th, td ,select,option{
	            padding: 0;
	            margin: 0;
	            list-style: none;
	        }
	        body{
	        		
	        }
	        
	        .mui-table-view:before{
	        	display:none;
	        }
	        .mui-table-view:after{
	        	display:none;
	        }
	        #list{
	        	background-color:transparent;
	        	/*min-height: 100vh;*/
	        }
			#list >li{
				height:95px;
				background-color:#fff;
				margin-bottom:9px;
				padding-top:0px;
				padding-bottom:10px;
				padding-left:0;
				padding-right:0;
				position:relative;
			}
			#list >li>div.mui-slider-handle{
				width:100%;
				height:95px;
				position:relative;
				padding-left:2.6%;
				padding-right:2.6%;
				padding-top:10px;
				padding-bottom:10px;
			}
			#list >li>div.mui-slider-handle>p{
				float:left;
				width:75px;
				height:75px;
				background: url() no-repeat center center;
				background-size:cover;
			}
			
			#list >li>div.mui-slider-handle>div{
				float:left;
				height:75px;
				/*width:calc( 100% - 5.2% - 75px - 2.6%);*/
				position: absolute;
				/*left:calc(5.2% + 75px);*/
			}
			#list >li>div.mui-slider-handle>div.none{
				float:left;
				height:75px;
				/*width:calc( 100% - 5.2%  );*/
				position: absolute;
				left:2.6%!important;
			}
			#list >li>div.mui-slider-handle>div>p{
				position:absolute;
				top: 50%;
				-webkit-transform: translateY(-50%) ;
				font-size:15px;
				color:#333;
				overflow : hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				word-break:break-all;
			}
			#list >li>div.mui-slider-handle>div>span{
				position:absolute;
				right:0;
				bottom:0;
				font-size: 11px;
				color:#999;
				line-height: 11px;
			}

			.mui-table-view-cell:after{
				
				display:none;
			}
			
			
			.mui-btn-red{
				font-size:15px;
				background-color:#ee3b30;
			}
			#list>li:first-child{
				margin-top:2px;
			}
			
			.mui-slider-handle>img{
				position:absolute;
				right:2.6%;
				top:10px;
				height:14px;
			}
			/*审核中文字样式修改*/
			.mui-slider-handle>a{
				position:absolute;
				right:2.6%;
				font-size:12px;
				color:#f59f32;
				top:10px;
				height:14px;
			}
			.loser p{
				color:#999!important;
			}
			.loser>div>p{
				opacity: .6;
			}
			
			/*//空数据*/
			.kong{
				position:absolute;
				width:40%;
				top: 50%;
				left:50%;
				-webkit-transform: translateY(-50%) translateX(-50%);
				display:none;
				margin-top:6.5%;
				/*padding-top: 45px;*/
				z-index: 1500;
			}
			.kong>img{
				width:100%;
			}
			/*新手指南*/
			.guide{
				position:absolute;
				top:0;
				left:0;
				width:100%;
				height:100%;
				z-index: 100;
			}
			.guide .modal{
				position:absolute;
				top:0;
				left:0;
				width:100vh;
				height:100vh;
				background: rgba(0,0,0,.65);
			}
		</style>
	</head>
	<body>
		
		<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
		  <div class="mui-scroll">
		    <!--数据列表-->
		    <ul class="mui-table-view mui-table-view-chevron"  id='list'>
		    		
		    	 <!--<li class="mui-table-view-cell " >
						<div class="mui-slider-right mui-disabled">
							<a class="mui-btn mui-btn-red" data-id='+p+'>删除</a>
						</div>
						<div class="mui-slider-handle">
							<a>正在审核</a>
							<p style='background-image: url(../../images/ce1.jpg);'></p>
							<div class="none"style="    margin-left: 75px;    width: calc( 100% - 5.2% - 75px - 2.6%);">
			    				<p>你好手机你好手机你好手机你好手机你好手机你好手机你好手机你好手机</p>
			    				<span>2017-12-26</span>
			    			</div>
						</div>
				</li>-->

		    </ul>
		    
		  </div>	
		  </div>
		  <div class='kong'>
				<img src="../../images/my/index/null.png" alt="" />
			</div>	

		<script type="text/javascript" src='../../plugins/jquery/jquery-3.1.0.min.js'></script>
		<script src="../../plugins/mui/mui.min.js"></script>
		<script src="../../js/getApiToken.js"></script>
		<script src="../../js/md5.js"></script>
		<!--<script type="text/javascript" src="../plugins/mui/update.js"></script>-->
		<script type="text/javascript">
			var first=0;
			mui.init({
			  pullRefresh : {
			    container:"#refreshContainer",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
//			    down : {
//			      height:50,//可选,默认50.触发下拉刷新拖动距离,
//			      auto: false,//可选,默认false.自动下拉刷新一次
//			      contentdown : "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
//			      contentover : "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
//			      contentrefresh : "正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容
//			      callback :function(){
//			      	  mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
//			      } //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
			     up : {
				      height:50,//可选.默认50.触发上拉加载拖动距离
				      auto:false,//可选,默认false.自动上拉加载一次
				      contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
				      contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
				      callback :function pullfresh() {
				      	if(true){
				      	 myAjax('card/card/getUserCard', 'get', {
								'user_id': plus.storage.getItem('cg_user_id'),
								'user_token': plus.storage.getItem('cg_user_token'),
								'page_cnt':3,
								'need_deal':1,
								'update_time':updateTime
							}, function(data) {
								
								updateTime=data.update_time;
								if(data.success){
									
									
									
									if(data.data.length<3){
										mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);
									}else{
										mui('#refreshContainer').pullRefresh().endPullupToRefresh(false);
									}
									
									for(var i=0;i<data.data.length;i++){
										var a=add(data.data[i].path,data.data[i].title,data.data[i].update_time,data.data[i].article_id);
										$('#list').append(a);
										
									}
									calc();
								}else{
									mui.toast(data.error_msg);
								}
							})
				      	}
						first++;
						    
					}
				   } 
				}
			});
			
			
			
		var updateTime;//第二次ajax用来取数据
		var width;
		mui.plusReady(function() {
			var self = plus.webview.currentWebview();
			width=self.width;	
			if(self.height){
				$('#list').css({'minHeight':self.height-95+'px'});
			}
			$('#list').delegate('.mui-slider-handle','tap',function(){
				//审核中帖子跳转
				mui.toast('审核成功后,才能查看帖子详情');
			})	
			
			
				
			$('#list').delegate('.mui-btn-red','tap',function(){
				$(this).attr('data-id');
				var me=this;//留住this
				mui.confirm('确认删除该条帖子吗？', '删除确认', function(e) {
						if (e.index == 0) {
							//取消
						} else {
							plus.nativeUI.showWaiting('删除中...');
							//删除数据
							 myAjax('card/card/deteleCard', 'post', {
												'user_id': plus.storage.getItem('cg_user_id'),
												'user_token': plus.storage.getItem('cg_user_token'),
												'article_id':$(me).attr('data-id')
											}, function(data) {
												
												if(data.success){
													plus.nativeUI.closeWaiting();
													$(me).parent().parent().fadeOut();
													$(me).parent().parent().remove();
													if(!$('#list>li').length){
														$('.kong').show();
													}
												}else{
													mui.toast(data.error_msg);
												}
							})
							
						}
					});
			})
				
			
			
			//刚进来自动获取8条数据
			plus.nativeUI.showWaiting();
			 myAjax('card/card/getUserCard', 'get', {
								'user_id': plus.storage.getItem('cg_user_id'),
								'user_token': plus.storage.getItem('cg_user_token'),
								'page_cnt':8,
								'need_deal':1
							}, function(data) {
								plus.nativeUI.closeWaiting();
								if(data.success){
									updateTime=data.update_time;
									
									if(!data.data.length){
										$('.kong').show();
									}
									
									if(data.data.length<8){
										mui('#refreshContainer').pullRefresh().disablePullupToRefresh();
									}
									for(var i=0;i<data.data.length;i++){
										var a=add(data.data[i].path,data.data[i].title,data.data[i].update_time,data.data[i].article_id);
										$('#list').append(a);
									}
									calc();
								}else{
									mui.toast(data.error_msg);
								}
			})
				 
		});
			//a图片 b标题 c审核状态 d时间
			function add(a,b,d,p){
				if(a){
					var a="<p style='background-image: url("+(_baseUrl+a)+");'></p>"
					
					var y=''
				}else{
					var a='';
					var y='none'
				}
				
//				var c='<img src="../../images/my/index/audit-ing.png"/>'
				//审核中图片修改为===审核中..文字样式
				var c='<a>正在审核</a>'
				
				var d='<span>'+d+'</span>';
				
			return '<li class="mui-table-view-cell " >'+
						'<div class="mui-slider-right mui-disabled">'+
							'<a class="mui-btn mui-btn-red" data-id='+p+'>删除</a>'+
						'</div>'+
						'<div class="mui-slider-handle">'+
							c+
							a+
							'<div class="'+y+'">'+
			    				'<p>'+b+'</p>'+
			    				d+
			    			'</div>'+
						'</div>'+
				'</li>'
				
			}
			
			
			//适配CSScalc函数
			function calc(){
				$('#list>li>div.mui-slider-handle>div').css({'width':width*0.922 -75+'px'});
				$('#list>li>div.mui-slider-handle>div').css({'left':width*0.052 + 75 +'px'});
				$('#list >li>div.mui-slider-handle>div.none').css({'width':width*0.948+'px'});
			}
		</script>
	</body>
</html>
